import React, { Component } from 'react';
import { connect } from 'dva';
import { Alert, notification } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';
import { seccode } from '../../services/session-auth';
import { codeMessage } from '../../utils/request';

const { Tab, UserName, Password, Submit } = Login;

@connect(({ user, loading }) => ({
    user,
    submitting: loading.effects['user/login'],
})) //eslint-disable-line
export default class LoginPage extends Component {
    state = {
        type: 'account',
        submitDisabled: false,
        // 是否重置验证码按钮
        shouldBeinitialized: false,
    };
    componentWillUnmount() {
        notification.destroy();
    }

    onTabChange = type => {
        this.setState({ type });
    };

    handleSubmit = (err, values) => {
        const { dispatch } = this.props;
        const { userName, password } = values;
        if (!err) {
            dispatch({
                type: 'user/login',
                payload: {
                    user: userName,
                    password,
                },
            });
        }
    };

    formValiateChange(err) {
        if (err) {
            this.setState({
                submitDisabled: true,
            });
        } else {
            this.setState({
                submitDisabled: false,
            });
        }
    }
    onGetCaptcha(data) {
        return seccode(data)
            .then(ttl => {
                notification.success({
                    message: '获取验证码成功',
                });
                return ttl;
            })
            .catch(e => {
                const { message, status } = e;
                notification.error({
                    message: '获取验证码失败',
                    description: message ? message : codeMessage[status],
                });
                throw e;
            });
    }

    renderMessage = content => {
        return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
    };

    render() {
        const { user, submitting } = this.props;
        const { type, submitDisabled, shouldBeinitialized } = this.state;
        return (
            <div className={styles.main}>
                <div className={styles.introduce} />
                <div className={styles.login}>
                    <Login
                        shouldBeInitialized={shouldBeinitialized}
                        onValiateChange={e => this.formValiateChange(e)}
                        defaultActiveKey={type}
                        onTabChange={this.onTabChange}
                        onSubmit={this.handleSubmit}
                    >
                        <Tab key="account" tab="账户密码登录">
                            {user.status === 'error' &&
                                user.type === 'account' &&
                                !submitting &&
                                this.renderMessage('账户或密码错误')}
                            <UserName
                                name="userName"
                                className={styles.input}
                                placeholder="账号"
                                prefix={null}
                            />
                            <Password
                                name="password"
                                className={styles.input}
                                placeholder="密码"
                                prefix={null}
                            />
                        </Tab>
                        <Submit
                            disabled={submitDisabled}
                            loading={submitting}
                            className={styles.submit}
                        >
                            登录
                        </Submit>
                    </Login>
                </div>
            </div>
        );
    }
}
